<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>收货地址列表</title>
	<link type="text/css" th:href="@{/html/css/bootstrap.min.css}" rel="stylesheet" />
	<script type="text/javascript" th:src="@{/html/js/jquery-1.12.4.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/bootstrap.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/vue.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/axios.min.js}"></script>
</head>
<body>
	<div id="app" class="container-fluid" style="margin-top: 10px;">
		<table class="table">
			<caption>
				<button class="btn btn-default btn-sm" v-on:click="add()">新增</button>
				<input id="username" type="hidden" th:value="${session.user.username}" />
			</caption>
			<thead>
				<tr>
					<th>默认</th>
					<th>编号</th>
					<th>发件人</th>
					<th>发件手机号</th>
					<th>收件人</th>
					<th>收件人手机号</th>
					<th>收件人地址</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in items">
					<td><input type="checkbox" disabled="disabled" v-model="item.addrdef"></input></td>
					<td>{{item.addrid}}</td>
					<td>{{item.senduser}}</td>
					<td>{{item.sendphone}}</td>
					<td>{{item.receiveuser}}</td>
					<td>{{item.receivephone}}</td>
					<td>{{item.receiveaddr}}</td>
					<td>
						<button class="btn btn-default btn-sm" v-on:click="def(item.addrid)">默认</button>
						<button class="btn btn-default btn-sm" v-on:click="del(item.addrid)">删除</button>
					</td>
				</tr>
			</tbody>
		</table>
		<div id="mymodal" class="modal modal-dialog fade" style="position: absolute;">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button class="close" data-dismiss="modal">&times;</button>
	                <h4 class="modal-title">新建收货地址</h4>
	            </div>
	            <div class="modal-body" style="height: 270px;">
		            <form class="form-horizontal" v-on:submit.prevent="added()">
		            	<div class="col-sm-2">
		                    <label class="control-label pull-right">发件人:</label>
		                </div>
		                <div class="col-sm-5">
		                    <input type="text" v-model="item.senduser" required="required" placeholder="请输入发件人姓名" class="form-control" />
		                </div>
		                <div class="col-sm-5 help-block">发件人姓名不能为空</div>
		                <div class="col-sm-2">
		                    <label class="control-label pull-right">联系电话:</label>
		                </div>
		                <div class="col-sm-5">
		                    <input type="text" v-model="item.sendphone" required="required" placeholder="请输入发件人联系电话" class="form-control" />
		                </div>
		                <div class="col-sm-5 help-block">发件人联系电话不能为空</div>
		                <div class="col-sm-2">
		                    <label class="control-label pull-right">收件人:</label>
		                </div>
		                <div class="col-sm-5">
		                    <input type="text" v-model="item.receiveuser" required="required" placeholder="请输入收件人姓名" class="form-control" />
		                </div>
		                <div class="col-sm-5 help-block">收件人姓名不能为空</div>
		                <div class="col-sm-2">
		                    <label class="control-label pull-right">联系电话:</label>
		                </div>
		                <div class="col-sm-5">
		                    <input type="text" v-model="item.receivephone" required="required" placeholder="请输入收件人联系电话" class="form-control" />
		                </div>
		                <div class="col-sm-5 help-block">收件人联系电话不能为空</div>
		                <div class="col-sm-2">
		                    <label class="control-label pull-right">收件地址:</label>
		                </div>
		                <div class="col-sm-5">
		                    <textarea clos="50" rows="3" warp="virtual" required="required" v-model="item.receiveaddr" placeholder="请输入收件地址详情" class="form-control"></textarea>
		                </div>
		                <div class="col-sm-5 help-block">收件地址详情不能为空</div>
		                <div class="col-sm-5 col-sm-offset-2">
		                	<button class="btn btn-default btn-sm" >添加</button>
	               			<button class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
		                </div>
		            </form>
	            </div>
	        </div>
	    </div>
    </div>
    <script type="text/javascript">
    	new Vue({
    		el:'#app',
    		data:{
    			serviceUrl:'http://localhost:8001/myservice',
    			items:{},
    			item:{}
    		},
    		beforeMount:function(){
    			this.list();
    		},
    		methods:{
    			list:function(){
    				var url = this.serviceUrl+"/cust/list/addr/"+$("#username").val();
    				var self = this;
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					self.items = res.data;
    				});
    			},
    			add:function(){
    				this.item={};
    				$("#mymodal").modal("show");
    			},
    			added:function(){
    				
    				var params = new URLSearchParams();
    				params.append("username",$("#username").val());
    				params.append("senduser",this.item.senduser);
    				params.append("sendphone",this.item.sendphone);
    				params.append("receiveuser",this.item.receiveuser);
    				params.append("receivephone",this.item.receivephone);
    				params.append("receiveaddr",this.item.receiveaddr);

    				var url = this.serviceUrl+"/cust/add/addr"
    				var self = this;
    				axios.defaults.withCredentials = true;
    				axios.post(url,params).then(function(res){
    					alert(res.data.message);
    					if(res.data.code==200){
    						self.list();
    						$("#mymodal").modal("hide");
    					}
    				});
    			},
    			def:function(id){
    				var url = this.serviceUrl+"/cust/def/addr/"+$("#username").val()+"/"+id;
    				var self = this;
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					alert(res.data.message);
    					if(res.data.code==200){
    						self.list();
    					}
    				});
    			},
    			del:function(id){
    				if(confirm("是否确定删除收货地址信息?")){
    					var url = this.serviceUrl+"/cust/del/addr/"+$("#username").val()+"/"+id;
        				var self = this;
        				axios.defaults.withCredentials = true;
	    				axios.get(url).then(function(res){
	    					alert(res.data.message);
	    					if(res.data.code==200){
	    						self.list();
	    					}
	    				});
    				}
    			}
    		}
    	});
    </script>
</body>
</html>